﻿<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>开发规范</title>
<link href="/resources/Doc/css/style.css" rel="stylesheet" />
<link href="/resources/Doc/lib/responsive.css" rel="stylesheet" />
<!--[if lt IE 9]><script src="/resources/Doc/lib/H5shiv.js"></script><![endif]-->
</head>
<body class="hasNav">
<header class="wrap">
  <h1>前端框架开发文档</h1>
</header>
<nav class="wrap nav" id="nav"></nav>
<section class="wrap" id="normal">
  <h2>开发规范</h2>
  <h3 id="before">关于</h3>
  <p>《规范》用于指导基于模块化框架和组件化框架的开发，以避免异常和便于维护。</p>
  <h3 id="HTML">HTML</h3>
  <ol>
    <li>编码utf-8；</li>
    <li>H5文档格式；</li>
    <li>模板后缀.htm；</li>
    <li>模板以“栏目_功能”格式命名，如“news_list.htm”、“pro_detail.htm”；</li>
  </ol>
  <h3 id="CSS">CSS</h3>
  <ol>
    <li>编码utf-8；</li>
    <li>使用class选择器；</li>
    <li>选择器命名务必表意清晰，建议“栏目_表现形式”格式，如“.news_list”、“.pro_detail”；</li>
    <li>z-index最高层级99；</li>
    <li>私有后代选择器命名以下划线（_）开头，如“.job ._item”、“.job ._cell”；</li>
  </ol>
  <h3 id="javascript">javascript</h3>
  <ol>
    <li>编码utf-8；</li>
    <li>模板有唯一的js入口文件，模板js放在项目下app/文件夹，与模板同名，统一引用common.js组织公用脚本；</li>
    <li>非模块化文件放在项目下lib/文件夹，单独在模板头部/底部普通引入；</li>
  </ol>
</section>
<section class="wrap" id="module">
  <h2>插件开发</h2>
  <ol>
    <li>插件库是框架根目录下modules/，插件只有一个js文件或只依赖一个css文件可以直接放在modules/根目录，包含更多文件（如图片）的插件放在modules/插件同名文件夹/下；</li>
    <li>文件顶部统一注释：文件名、GUN风格版本号、更新内容、更新日期；</li>
    <li>书写格式视模块加载器（seajs\mod）而定，依赖文件尽量与js文件同名，css文件顶部同样需要注释css文件名、版本号、更新内容、更新日期；</li>
    <li>以小粒度、潜封装为原则，每个插件只实现一个特定功能（功能粒度小），实现上保留最大的结构开放性和样式扩展性（封装层次潜）；</li>
  </ol>
</section>
<section class="wrap" id="widget">
  <h2>组件开发</h2>
  <ol>
    <li>组件库是框架根目录下widget/，按“类目/名称/文件”的结构存放，命名规则为字母+（1-2）位数字，如“news/A1/A1.htm”；</li>
    <li>组件除了模板文件还可以包含样式、脚本、图片等资源文件，样式和脚本需要在模板头部明确引入，如“&lt;!--NewsList-A1 @require ./A1.less @require ./A1.js --&gt;”；</li>
    <li>组件样式如果需要引用全局配置需要使用less，全局样式配置在框架根目录下less/set.less；</li>
    <li>组件模板、样式、脚本在书写时要时刻防止影响到组件外，也不能被组件外影响，例如样式可以全部使用私有后代选择器，js操作com选择要精准，最好使用链式选择；</li>
  </ol>
</section>
<section class="wrap" id="icon">
  <h2>图标添加</h2>
  <h3 id="paint">绘制</h3>
  <p></p>
  <h3 id="add">添加</h3>
  <p></p>
</section>
<footer class="wrap oh tc">
  <div class="row "> <a href="#" title="返回顶部" class="dib foot_logo gotop">
    <figure></figure>
    </a>
    <p class="dib"> © 2014 - 3014  zangtao@21-sun.com</p>
  </div>
</footer>
</body>
<script src="/resources/modules/seajs/sea.js" id="seajs-node"></script>
<script src="/resources/Doc/seajs.config.js"></script>
<script>
	seajs.use('/resources/Doc/resets/doc')
</script>
</html>